<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后台管理系统</title>
	<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
	<link rel="stylesheet" type="text/css" href="css/main.css"/>
	<!-- js库 -->
	<script src="js/jquery-3.2.1.js"></script>
	</head>
	<body>

				<div class="col-md-12 col-xs-12">
					<img src="img/banner_3.jpg"  width="100%" height="150px"/>
			</div>
			<div class="container-fluid">
				<!-- 菜单区域 -->
				<div class="col-md-2 " id="menu">
					<div class="list-group">
						<a href="music_add.html" class="list-group-item active" target="content">音乐上传</a>
						<a href="music_list.html" class="list-group-item" target="content">音乐列表</a>
						<a href="user_manage.html" class="list-group-item" target="content">用户管理</a>
						<a href="update_pwd.html" class="list-group-item" target="content">密码修改</a>
						<a href="login.html" class="list-group-item">系统退出</a>
					</div>
					
				</div>
				<!-- 内容区域 -->
				<div class="col-md-10 " id="content">
					<iframe name="content" src="music_add.html" ></iframe>
			
				</div>
				<p class="text-center" style="font-size: 16px;">&copy;黄月月出品</p>
			</div>
<script>
	//完成菜单切换效果
	$(function(){
		//选中所有菜单项，绑定点击事件
		$('#menu>div>a').on('click',function(){
			//去除所有菜单项的激活效果
			$('#menu>div>a').removeClass('active');
			//为当前点击的菜单项添加激活效果
			$(this).addClass('active');
		})
	})
</script>
	</body>
</html>
